<template>
  <div class="outer">
    <div class="outer-ctx">
      <div class="outer-padding">
        <overview-school></overview-school>
      </div>
      <div class="outer-padding">
        <map-school></map-school>
      </div>
      <div class="history-ctx">
        <p class="history-title">近期历史活动</p>
        <a-tabs v-model:activeKey="activeKey" @change="navTab">
          <a-tab-pane :key="index" :tab="item" v-for="(item, index) in nav"></a-tab-pane>
        </a-tabs>
        <div class="list-list">
          <div
            class="list-item"
            v-for="item in courseList"
            :key="item.id"
            @click="onSearch(item.id)"
          >
            <div class="list-item__time">
              <p>{{ item.date }}</p>
              <p>14:00:00</p>
            </div>
            <img class="list-item__img" :src="item.img" alt="" />
            <div class="list-right">
              <p class="list-item__title">{{ item.title }}</p>
              <p class="list-item__text">
                <span>教师：</span>
                <span class="list-item__text--res">{{ item.username }}</span>
              </p>
              <p class="list-item__text">
                <span>教室：</span>
                <span class="list-item__text--res">{{ item.classroom }}</span>
              </p>
              <p class="list-item__text">
                <span>班级：</span>
                <span class="list-item__text--res">{{ item.className }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <RightContent></RightContent>
  </div>
</template>

<script lang="ts">
  import { defineComponent, reactive, ref, watchEffect, toRefs, onMounted } from 'vue'
  import RightContent from './../components/right-content.vue'
  import { getHeaderList, getCourseList } from '@/api/homepage/index'
  import { useRouter } from 'vue-router'
  import OverviewSchool from '@/layout/header/components/overview-school.vue'
  import MapSchool from '@/layout/header/components/map-school.vue'

  export default defineComponent({
    name: 'Welcome',
    components: {
      RightContent,
      OverviewSchool,
      MapSchool,
    },
    setup() {
      const state = reactive({
        queryParams: {
          time: null,
        },
        list: [] as any,
        courseList: [] as any,
        activeKey: 0,
        nav: ['听课', '巡课', '评课'],
      })

      onMounted(async () => {
        const res = await getHeaderList(state.queryParams)
        state.list = res.list
        // window.open(`#${url}`, '_blank')
        getData({})
      })
      // console.log(performanceMonitor.getPerformanceData(), 'performanceMonitor')

      const getData = async (params) => {
        console.log(params)
        const res = await getCourseList(params)
        state.courseList = res.list
      }

      const router = useRouter()

      const navTab = (step) => {
        console.log(step)
      }

      // 查询路由跳转
      const onSearch = (ev) => {
        // window.open(`#/screen?id=${ev}`, '_blank')
        router.push(`/screen?id=${ev}`)
        // router.push({
        //   path: '/list',
        //   query: {
        //     name: ev
        //   }
        // })
      }
      return {
        ...toRefs(state),
        navTab,
        onSearch,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .outer {
    display: flex;

    .outer-ctx {
      width: calc(100% - 290px);
      border-right: 1px solid #eee;
      min-width: 1000px;

      .outer-ctx__header {
        padding: 24px 32px;
        overflow: hidden;
      }

      .ctx-list,
      .map-list,
      .map-list {
        height: 572px;
      }

      .map-list__item {
        display: flex;

        img {
          width: 240px;
          height: 240px;
        }
      }

      .history-ctx {
        // border-top: 12px solid #eee;
        padding: 24px 32px;

        .history-title {
          font-size: 18px;
          line-height: 26px;
          color: #333;
          padding-bottom: 24px;
        }

        .list-list {
          .list-item {
            // width: 186px;
            // height: 104px;
            padding: 12px;
            margin-right: 24px;
            margin-bottom: 24px;
            display: flex;
            color: #666;
            cursor: pointer;
            &:hover {
              background: #f9f9f9;
            }

            .list-item__time {
              margin-right: 32px;
              color: #999;
              line-height: 22px;
            }

            .list-item__img {
              width: 186px;
              height: 104px;
              border-radius: 4px;
              margin-right: 32px;
            }

            .list-right {
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              height: 104px;
              justify-content: space-between;
            }

            .list-item__title {
              font-size: 16px;
              color: #333;
              font-weight: bold;
            }

            .list-item__text {
              color: #999;
              display: flex;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;

              .list-item__text--res {
                color: #666;
              }
            }
          }
        }
      }
    }
  }
</style>
